<!--
  @author:  long
  @date:    2023/3/7
  @file:    概况信息
  @require:
-->
<template>
  <div>
    <div v-for="(item, index) in overviewData" class="mb-5" :key="index">
      <el-descriptions :column="column" border>
        <template #title>
          <TitleName
            :title="item.title"
            icon="i-carbon-bookmark-filled"
          ></TitleName>
        </template>
        <el-descriptions-item
          v-for="(t, i) in item.list"
          :key="index + i + ''"
          :label="t.label"
          label-align="right"
          label-class-name="w-3/24"
          class-name="w-9/24"
        >
          <!--      客户类型        -->
          <template v-if="t.prop === 'type'">企业</template>
          <!--      所属行业        -->
          <template v-else-if="t.prop === 'industryTypeCode'">
            <dict-tag
              :options="industry_category"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      客户类别        -->
          <template v-else-if="t.prop === 'customerType'">
            <dict-tag :options="customer_class" :value="overviewInfo[t.prop]" />
          </template>
          <!--      客户星级        -->
          <template v-else-if="t.prop === 'starRating'">
            <el-rate disabled v-model="overviewInfo[t.prop]" />
          </template>
          <!--      客户来源        -->
          <template v-else-if="t.prop === 'origin'">
            <dict-tag
              :options="customer_source"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      客户状态        -->
          <template v-else-if="t.prop === 'status'">
            <dict-tag
              :options="customer_status"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      角色        -->
          <template v-else-if="t.prop === 'roleCode'">
            <dict-tag :options="contacts_role" :value="overviewInfo[t.prop]" />
          </template>
          <!--      岗位        -->
          <template v-else-if="t.prop === 'postCode'">
            <dict-tag :options="post_dict" :value="overviewInfo[t.prop]" />
          </template>
          <!--      数电配置        -->
          <template v-else-if="t.prop === 'isDigital'">
            <div class="flex">
              <dict-tag :options="sys_yes_no" :value="overviewInfo[t.prop]" />
              <div v-if="overviewInfo[t.prop] == 1">
                ({{ overviewInfo.digitalInfo }})
              </div>
            </div>
          </template>
          <!--       联系人姓名       -->
          <template v-else-if="t.prop === 'contactName'">
            <div class="flex items-center justify-between w-full pr-2">
              <span>{{ overviewInfo[t.prop] }}</span>
              <div v-if="overviewInfo[t.prop]">
                <el-button
                  size="small"
                  type="primary"
                  link
                  icon="Edit"
                  @click="toUpdate"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  link
                  icon="ArrowRight"
                  @click="toDetails"
                  >详情</el-button
                >
              </div>
            </div>
          </template>
          <template v-else>{{ overviewInfo[t.prop] }}</template>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup name="Overview">
import { getCurrentInstance } from 'vue'
import { getCustomerInfo } from '@/api/customerManage/customerList'

const { proxy } = getCurrentInstance()
const router = useRouter()
const props = defineProps({
  details: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const column = ref(2)
// 字典 具体查看根目录DICT.md文件
const {
  industry_category,
  customer_class,
  post_dict,
  contacts_role,
  duties_dict,
  customer_status,
  customer_source,
  sys_yes_no
} = proxy.useDict(
  'industry_category',
  'customer_class',
  'post_dict',
  'contacts_role',
  'duties_dict',
  'customer_status',
  'customer_source',
  'sys_yes_no'
)
const data = reactive({
  overviewInfo: {},
  overviewData: [
    {
      title: '基本信息',
      list: [
        { label: '客户名称', prop: 'customerName' },
        { label: '企业税号', prop: 'customerTaxcode' },
        { label: '客户类型', prop: 'type' },
        { label: '所属行业', prop: 'industryTypeCode' },
        { label: '客户类别', prop: 'customerType' },
        { label: '征信积分', prop: 'creditScore' },
        { label: '数电配置', prop: 'isDigital' },
        { label: '客户来源', prop: 'origin' },
        { label: '客户状态', prop: 'status' },
        { label: '客户归属', prop: 'userName' },
        { label: '客户星级', prop: 'starRating' }
      ]
    },
    {
      title: '首联系人',
      list: [
        { label: '联系人姓名', prop: 'contactName' },
        { label: '手机号码', prop: 'contactNumber' },
        { label: '角色', prop: 'roleCode' },
        { label: '岗位', prop: 'postCode' },
        { label: '生日', prop: 'birthday' },
        { label: '电子邮件', prop: 'email' },
        { label: '固定电话', prop: 'telephone' },
        { label: '传真号码', prop: 'fax' }
      ]
    }
  ]
})
const { overviewData, overviewInfo } = toRefs(data)
watchEffect(() => {
  overviewInfo.value = props.details
})

/**
 * 跳转到编辑
 */
function toUpdate() {
  router.push({
    path: '/customerManage/contactsModules/contactsAdd',
    query: { flag: 'update', contactsId: overviewInfo.value.coId }
  })
}

/**
 * 跳转到详情
 */
function toDetails() {
  router.push({
    path: '/customerManage/contactsModules/contactsDetails',
    query: { contactsId: overviewInfo.value.coId }
  })
}

/**
 * 初始化
 */
const init = () => {}
init()
</script>

<style scoped lang="scss"></style>
